import type { EChartsOption } from "echarts";


export function getOption(): EChartsOption {
  let xdata = [2018,2019,2020,2021,2022]
  let ydata = ['1.99', '25.99', '32.85', '5.08', '1.15']
  let ydata2 = ['1.80', '16.28', '32.85', '5.08', '1.12']
  let ydata3 = ['2.80', '16.28', '2.85', '50.08', '10.12']
  return {
    legend: {
      left:'30%',
      bottom:'10%',
      itemWidth: 9,
      itemHeight: 5,
      icon: 'roundRect',
      padding: 0,
      textStyle: {
        color: '#E6E6E7',
        fontSize: 14,
        padding: [2, 0, 0, 0],
      },
    },
    color: ['#00E4F2', '#6EEBFF', '#F4DA00', '#ECD206'],
    grid: {
      left: '1%',
      right: '1%',
      top: '10%',
      bottom: '22%',
      containLabel: true,
    },
    xAxis: {
      axisLabel: {
        color: '#19C3D4',
        fontSize: 14,
        interval: 0,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#04497D',
        },
        show: true,
      },
      data: xdata,
      type: 'category',
    },
    yAxis: {
      axisLabel: {
        color: '#9AAEB2',
        fontSize: 14,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#04497D',
        },
        show: true,
      },
      // "name": ""
    },
    series: [
      {
        name: '进出口总额',
        data: ydata,
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#092250',
              },
              {
                offset: 1,
                color: '#00E4F2',
              },
            ],
          },
        },
        label: {
          show: false,
        },
      },
      {
        data: ydata,
        type: 'pictorialBar',
        barMaxWidth: 20,
        symbolPosition: 'end',
        symbol: 'diamond',
        symbolOffset: ['-18', '-7'],
        symbolSize: [15, 13],
        zlevel: 2,
      },
      {
        name: '进口额',
        data: ydata2,
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0D2559',
              },
              {
                offset: 1,
                color: '#F4DA00',
              },
            ],
          },
        },
        label: {
          show: false,
        },
      },
      {
        data: ydata2,
        type: 'pictorialBar',
        barMaxWidth: 20,
        symbolPosition: 'end',
        symbol: 'diamond',
        symbolOffset: ['0', '-7'],
        symbolSize: [15, 13],
        zlevel: 3,
      },
      {
        name: '出口额',
        data: ydata3,
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0D2559',
              },
              {
                offset: 1,
                color: '#07b688',
              },
            ],
          },
        },
        label: {
          show: false,
        },
      },
      {
        data: ydata3,
        type: 'pictorialBar',
        barMaxWidth: 20,
        symbolPosition: 'end',
        symbol: 'diamond',
        symbolOffset: ['18', '-7'],
        symbolSize: [15, 13],
        zlevel: 3,
      },
    ],
    tooltip: {
      trigger: 'axis',
      show: true,
      backgroundColor: 'rgba(0,0,0,0.8)',
      borderWidth: 0,
      textStyle: { fontSize: '100%' },
      formatter: function (item:any) {
        const returnData1 = '<span style="display:inline-block;margin-right:5px;width:9px;height:5px;background:' + item[1].color + '"></span>'
        const returnData2 = '<span style="display:inline-block;margin-right:5px;width:9px;height:5px;background:' + item[4].color + '"></span>'
        //console.log(item);
        return '<div style="color:#FFF">' + item[0].axisValue + '<br/>' + returnData1 + item[0].seriesName + ':' + item[0].value + '人<br/>' + returnData2 + item[3].seriesName + ':' + item[3].value + '人</div>'
      },
    },
  }
}
